<template>
	<view>
		<cu-custom rightAll :bgColor="navColor" reverse status_reverse>
			我的账户
		</cu-custom>
		<image class="bg abso w100" src="/static/account/managemoney_topbg.png" mode="scaleToFill"></image>
		<view class="main">
			<view v-show="!showDetail"
				class="tabs rela u-flex u-flex-around u-flex-items-center">
				<view class="tabs-item u-flex u-flex-center u-flex-items-center"
					v-for="(item,index) in tabs" :key="index"
					:class="{active: index == tabIndex}">
					{{item.name}}
				</view>
				<view class="tabs-line abso" :style="{left:lineLeft}"></view>
			</view>
			<view class="card padding-lr rela margin-top-lg u-flex-y">
				<view class="card-item u-flex-y padding-lr-sm padding-tb"
					:class="{'margin-top-xl': showDetail}"
					@click="showDetail = !showDetail">
					<view class="logo-line u-flex u-flex-between u-flex-items-center">
						<image class="logo" src="/static/common/login_view_icon_for_keyboard.png" mode="aspectFit">
						</image>
						<text class="color-theme">默认账户</text>
					</view>
					<view class="card-type u-flex u-flex-items-center">
						<view class="item margin-right-xs">
							I类
						</view>
						<view class="item margin-right-xs">
							借记卡
						</view>
						<view class="item u-flex u-flex-items-center margin-right-xs" v-show="showDetail">
							<text>
								设置别名
							</text>
							<image class="edit-icon" src="/static/account/edit.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="card-num u-flex u-flex-items-center" @longpress.stop="showEditCard">
						<text>
							{{
								showCardNum? _userinfo.cardNumber: formatCardNum(_userinfo.cardNumber, ' *** *** *** ')
							}}
						</text>
						<view class="card-num-operator margin-left-sm u-flex u-flex-items-center" v-show="showDetail">
							<image class="eye-icon" @click.stop="showCardNum = !showCardNum"
								:src="`/static/account/${showCardNum? 'eye_open': 'eye_close'}.png`" mode="aspectFit">
							</image>
							<text class="color-theme margin-left" v-show="showCardNum">
								复制卡号
							</text>
						</view>
					</view>
					<view v-show="!showDetail"
						@longpress.stop="showEditBanlace"
						class="card-banlance u-flex u-flex-around u-flex-items-center">
						<text class="color-949494">可用余额</text>
						<text class="banlance">
							￥{{_userinfo.formatBalance}}
						</text>
					</view>
					<view class="" v-show="showDetail">
						<view class="card-banlance-detail margin-top
						 padding-bottom-lg
						 u-flex u-flex-around u-flex-items-center"
							@longpress.stop="showEditBanlace">
							<view class="u-flex-y u-flex-fill">
								<text class="color-949494">可用余额</text>
								<text class="banlance margin-top-xs">
									￥{{_userinfo.formatBalance}}
								</text>
							</view>
							<view class="u-flex-y u-flex-fill padding-left">
								<text class="color-949494">账户余额</text>
								<text class="banlance margin-top-xs">
									￥{{_userinfo.formatBalance}}
								</text>
							</view>
						</view>
						<view
							class="card-operator padding-top-sm
						 u-flex u-flex-items-center u-flex-around color-theme">
							<text @click.stop="toDetail">
								明细查询
							</text>
							<text @click.stop="$Router.push({ name: 'transfer-account'})">
								转账汇款
							</text>
						</view>
					</view>
				</view>
			</view>

			<view class="padding-lr margin-top-lg" v-show="showDetail">
				<view class="card-infos bgcolor-ffffff padding-top-xs padding-bottom padding-lr"
					@longpress="showEditCard">
					<view class="u-flex u-flex-items-center u-flex-between margin-top-sm"
						v-for="(item,index) in infos" :key="index">
						<text>{{item.label}}:</text>
						<text>{{item.value}}</text>
					</view>
				</view>
				<view class="menus margin-top bgcolor-ffffff  u-flex u-flex-wrap u-flex-around ">
					<col-img-text v-for="(item,index) in menus" :key="index"
						:imgPath="`/static/account/${item.icon}`" :text="item.title"
						:containerStyles="{color: '#1b1b1b',
						width: '154rpx',
						height: '160rpx',
						'font-size': '28rpx',
						'justify-content':'flex-end',
						'margin-bottom': '10rpx'
						}"
						:imgStyles="{width: '106rpx',
						height: '106rpx',
						'flex-shrink': '0',
					'margin-bottom': '10rpx',}">
					</col-img-text>
				</view>
			</view>
		</view>

		<view v-show="!showDetail"
			@click="showEditCard"
			class="add-box u-flex u-flex-between u-flex-items-center bgcolor-ffffff">
			<view class="left u-flex-y u-flex-start">
				<text class="title">
					添加本行账户
				</text>
				<text class="color-949494 margin-top-xs">
					已有1个本行账户
				</text>
			</view>
			<image class="plus-icon" src="/static/common/plus_gray.png" mode="aspectFit"></image>
		</view>

		<u-modal :show="showCardModal" title="新增银行卡" @confirm="addCard" @cancel="closeModal" showCancelButton>
			<u--form
				labelPosition="left"
				:model="form"
				ref="form">
				<u-form-item
					label="银行卡号"
					prop="form.cardNumber"
					borderBottom>
					<u--input
						type="number"
						v-model="form.cardNumber"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="开户人名称"
					prop="form.holder"
					borderBottom>
					<u--input
						v-model="form.holder"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="开户网点"
					prop="form.network"
					borderBottom>
					<u--input
						v-model="form.network"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="开户日期"
					prop="form.openingTime"
					borderBottom>
					<u--input
						v-model="form.openingTime"
						border="none"></u--input>
				</u-form-item>
			</u--form>
		</u-modal>

	</view>
</template>

<script>
	import NavBarMixins from '@/common/mixins/navbar-mixins.js';
	export default {
		mixins: [NavBarMixins()],
		data() {
			return {
				tabs: [
				{
					name: '本行账户',
				}, {
					name: '他行账户',
				}],
				infos: [
				{
					label: '账号类型',
					value: '绿卡通'
				},
				{
					label: '账号状态',
					value: '正常'
				},
				{
					label: '签约标志',
					value: '签约账户'
				},
				{
					label: '开户日期',
					value: '2018/08/05'
				},
				{
					label: '开户机构',
					value: 'xxx'
				}],
				menus: [
				{
					title: '定活互转',
					icon: 'dhhz.png'
				},
				{
					title: '副卡设置',
					icon: 'fksz.png'
				},
				{
					title: '账户撤销',
					icon: 'zhcx.png'
				},
				{
					title: '账户安全锁',
					icon: 'zhaqs.png'
				},
				{
					title: '账户挂失',
					icon: 'zhgs.png'
				},
				{
					title: '子账户查询',
					icon: 'zzhcx.png'
				},
				{
					title: '短信通知',
					icon: 'dxtz.png'
				},
				{
					title: '他行转邮储',
					icon: 'thzyc.png'
				}, ],
				tabIndex: 0,
				lineLeft: '',
				showCardNum: false,
				showDetail: false,
				showCardModal: false,
				form: {
					cardNumber: '',
					network: '',
					openingTime: '',
					holder: ''
				},
			};
		},
		onShow() {
			this.initUserinfo();
			console.debug();
			this.infos[3].value = this.$u.date(new Date(this._userinfo.createTime).getTime(), 'yyyy/mm/dd');
			this.infos[4].value = this._userinfo.network;
		},
		mounted() {
			this.$u.getRect('.tabs-item').then(rect => {
				const { left, width } = rect;
				this.lineLeft = left + width / 2 - uni.upx2px(20) + 'px;';
				console.log(rect, this.lineLeft);
			});
		},
		methods: {
			addCard() {
				this.$api.addBankCard(this.form).then(() => {
					this.initUserinfo();
					this.closeModal();
				});
			},
			closeModal() {
				this.showCardModal = false;
			},
			showEditCard() {
				if (!this._hasLogin) return;
				this.showCardModal = true;
				console.debug('showEditCard');
			},
			showEditBanlace() {
				uni.showModal({
					placeholderText: '请输入金额',
					editable: true,
					success: (e) => {
						console.debug(e);
						const { content, confirm } = e;
						if (confirm) {
							const { id } = this._userinfo;
							this.$api.reCharge({
								id,
								balance: content
							}).then(() => {
								this.initUserinfo();
							}).catch((err) => {
								console.debug(err);
								this.$Tips.toast('修改错误!');
							});
						}
					}
				});
			},
			toDetail() {
				this.$Router.push({
					name: 'detail-list'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		height: 424rpx;
		top: 0;
	}

	.main {
		.tabs {
			height: 120rpx;

			&-item {
				color: #fbfbfb;
				transform: scale(1);
				font-size: 32rpx;
			}

			.active {
				color: #fff;
				font-weight: bold;
				transform: scale(1.05);
			}

			&-line {
				width: 40rpx;
				height: 6rpx;
				background-color: #fff;
				bottom: 0;
			}
		}

		.card {
			&-item {
				background-color: #fff;
				border-radius: 12rpx;

				.logo-line {
					.logo {
						width: 276rpx;
						height: 42rpx;
					}
				}

				.card-type,
				.card-num,
				.card-banlance {
					margin-left: 60rpx;
					margin-top: 30rpx;
				}

				.card-type {
					.item {
						border-radius: 12rpx;
						background-color: rgb(230, 248, 226);
						color: $color-theme;
						padding: 6rpx 14rpx;
						letter-spacing: 1rpx;

						.edit-icon {
							width: 30rpx;
							height: 30rpx;
							margin-left: 8rpx;
						}
					}
				}

				.card-num {
					font-size: 28rpx;
					padding: 10rpx 0;

					&-operator {
						.eye-icon {
							width: 56rpx;
							height: 56rpx;
						}
					}
				}

				.banlance {
					font-size: 32rpx;
				}

				.card-banlance {
					font-size: 28rpx;

					text {
						flex: 1;
					}
				}

				.card-banlance-detail {
					padding-left: 60rpx;
					border-bottom: 2rpx solid rgb(244, 244, 244);
					font-size: 28rpx;
					position: relative;

					&:before {
						content: "";
						width: 2rpx;
						height: 88rpx;
						left: 50%;
						transform: translateX(-50%);
						background-color: rgb(244, 244, 244);
						position: absolute;
					}
				}

				.card-operator {
					font-size: 28rpx;
					position: relative;

					&:before {
						content: "";
						width: 2rpx;
						height: 40rpx;
						left: 50%;
						transform: translateX(-50%);
						background-color: rgb(244, 244, 244);
						position: absolute;
					}
				}

			}
		}

		.card-infos,
		.menus {
			border-radius: 12rpx;
			color: rgb(128, 128, 128);
		}
	}

	.add-box {
		position: fixed;
		bottom: 12rpx;
		width: calc(100vw - 60rpx);
		padding: 30rpx 40rpx 20rpx;
		border-radius: 20rpx;
		left: 50%;
		transform: translate(-50%, 0);

		.left {
			.title {
				font-size: 30rpx;
			}
		}

		.plus-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
